<template>
    <div>
        <h1 style="text-align: center;">用户列表</h1>
        <el-button type="primary"
        v-permission="{path: '/user/add', name: '用户添加'}"
        @click="$router.push('/user/add')">新增用户</el-button>
            <el-table
                :data="userlist"
                style="width: 100%">
                <el-table-column
                    prop="username"
                    label="用户名"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="email"
                    label="邮箱"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="tel"
                    label="手机号">
                </el-table-column>
                <el-table-column 
                    label="角色"
                    > 
                    <template slot-scope="scope">
                        <span>{{scope.row.role ? scope.row.role.name : '前台用户'}}</span>    
                    </template>
                </el-table-column>
                <el-table-column
                    label="账号状态">
                    <template slot-scope="scope">
                        <el-switch
                        v-model="scope.row.enable"
                        active-color="#13ce66"
                        @change="change(scope.row._id)"
                        inactive-color="#ff4949">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    label="注册时间">
                    <template slot-scope="scope">
                        <span>{{ scope.row.updatedAt | time }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="最后修改">
                    <template slot-scope="scope">
                        <span>{{ scope.row.createdAt | time }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    v-permission="{path: '/user/edit', name: '用户修改'}"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    v-permission="{path:'/user/del', name:'用户删除'}"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
        <!-- </template> -->

        <!-- 编辑 -->
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
        >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="form.tel"></el-input>
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-switch
                        v-model="form.enable"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
                <el-form-item label="活动区域">
                <el-select v-model="form.role" placeholder="请选择角色">
                    <el-option v-for="role in rolelist" v-show="role.name != '超级' " :key="role._id" :label="role.name" :value="role._id"></el-option>
                </el-select>
            </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即修改</el-button>
                    <el-button @click="quxiao">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { userList, roleList, userEdit, userDel, userStatus } from '@/request'
import moment from 'moment';
import permission from '@/utils/permission'
export default {
    directives:{
        permission
    },
    data () {
        return {
            userlist:[],
            dialogVisible: false,
            form: {
                username: '',
                password: '',
                email: '',
                tel: '',
                enable: false,
                role: ''
            },
            rolelist:[]
        }
    },
    methods: {
        quxiao() {
            this.dialogVisible=false
            this.GetUserList()
        },
        async change(id){
            // console.log(id);
            let data =  await userStatus(id)
            // console.log(data);
            let { error_code,msg } = data
            if(error_code === 200){
                this.$message({
                    message: msg,
                    type: 'success',              
                });
            } else {
                this.$message({
                    message: msg,
                    type: 'error',
                });
            }
        },
        // 点击发请求  修改
        async onSubmit(){
            console.log(this.form);
            let data = await userEdit(this.form)
            // console.log(data);
            let {error_code, msg} = data
            if(error_code === 200) {
                // 给弹窗  清空表单数据 让表单隐藏 重新发请求 渲染用户列表
                this.$message({
                    type: 'success',
                    duration: 1500,
                    message: msg,
                    onClose: () => {
                        this.dialogVisible = false
                        this.form = {
                            username: '',
                            password: '',
                            email: '',
                            tel: '',
                            enable: false,
                            role: ''
                        }
                        this.GetUserList()
                    }
                })
            } else {
                this.$message({
                    type: 'error',
                    duration: 1500,
                    message: msg,
                })
            }
        },
        handleEdit(index, row) {
            // console.log(index, row);
            // return
            this.dialogVisible = true
            // console.log(row);
            this.form = row
            this.form.role = row.role._id
        },
        // 删除
        async handleDelete(index, row) {
            this.$confirm('你真的要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    userDel(row).then(data =>{
                        let { error_code,msg } = data
                            if(error_code === 200 ){
                                this.$message({
                                    type: 'success',
                                    duration: 1500,
                                    message: msg,    
                                })
                            } else {
                                this.$message({
                                    type: 'error',
                                    duration: 1500,
                                    message: msg,
                                })
                            }
                            this.GetUserList()
                    }) 
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '停止删除'
                });          
            });
            
        },
        async GetUserList() {
            let data = await userList()
            this.userlist = data.data
            console.log(this.userlist);
            this.userlist = this.userlist.filter(item => {return item.name != '超级'} )
            // console.log(this.userlist);
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
        async GetRoleList() {
            let data = await roleList()
            this.rolelist = data.data.rolelist
            // console.log(this.rolelist);
        }
    },
    created(){
        this.GetRoleList()
        this.GetUserList()
    },
    filters:{
        time(value) {
            return moment(value).format('YYYY-MM-DD HH:mm:ss')
        }
    }
}
</script>

<style>
    
</style>
